import React, { Component } from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import { CheckBox, Label } from 'iftide';
import Basic from './demo/Basic';
import Basic1 from './demo/Basic1';
import Basic2 from './demo/Basic2';
import Basic3 from './demo/Basic3';
import Basic4 from './demo/Basic4';

export default class CheckBox_Demo extends Component{
    constructor(props) {
        super(props);
    }

    render(){
        return(
            <View style={{height: '100%'}}>
                <ScrollView>
                    <View style={styles.container}>
                        <Label text = '复选样式一' fontWeight={'bold'} textDecorationLine={'underline'}/>
                    </View>
                    <Basic/>

                    <View style={styles.container}>
                        <Label text = '复选样式二' fontWeight={'bold'} textDecorationLine={'underline'}/>
                    </View>
                    <Basic1/>

                    <View style={styles.container}>
                        <Label text = '复选样式二 - 带图标' fontWeight={'bold'} textDecorationLine={'underline'}/>
                    </View>
                    <Basic2/>

                    <View style={styles.container}>
                        <Label text = '用户名勾选' fontWeight={'bold'} textDecorationLine={'underline'}/>
                    </View>
                    <Basic3/>

                    <View style={styles.container}>
                        <Label text = '协议勾选' fontWeight={'bold'} textDecorationLine={'underline'}/>
                    </View>
                    <Basic4/>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 13,
        paddingVertical: 8,
        backgroundColor: '#F5F7F9',
    },
});